<template>
  <el-container style="background-color: #F0F3F5;">
    <el-container style="margin: 10px 0 10px 10px;width: 75%;">
      <el-header style="height: 200px;margin-bottom: 10px;">
          <div  class="flex-column-space-around" >
            <div>
              <el-row type="flex" justify="start" >
                <el-col :span="0.5"><i class="el-icon-star-off" style="font-size: 25px;"></i> </el-col>
                <el-col :span="2" > <span style="color: #2381CA;font-size: 20px;font-weight: bold;">{{contactData.name || ''}}</span> </el-col>
                <el-col :offset="19" :span="3"><el-button size="small" style="color: #C3C3C3;" @click="goBack">返回</el-button></el-col>
              </el-row>
            </div>
            <div>
              <el-row>
                <el-col>
                  <!-- 表格-->
                  <el-form :model="contactData"  label-width="180px" label-position="top">
                    <el-row>

                      <el-col :span="3">
                        <el-form-item label="所属客户" prop="customerCompanyName">
                          {{contactData.customerCompanyName}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="3">
                        <el-form-item label="电话" prop="phone">
                          {{contactData.phone}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="3">
                        <el-form-item label="商机金额  " prop="phone">
                          {{contactData.phone}}
                        </el-form-item>
                      </el-col>
                      <el-col :span="3">
                        <el-form-item label="负责人  " prop="userName">
                          {{contactData.userName}}
                        </el-form-item>
                      </el-col>

                    </el-row>
                  </el-form>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-row :gutter="1">
                <el-col :span="2"> <el-button  type="primary" icon="el-icon-edit" @click="handleContactUpdate">编辑</el-button></el-col>
                <el-col :span="3"><el-button icon="el-icon-circle-plus-outline" @click="handleBusinessUpdate">新建商机</el-button></el-col>
                <el-col :span="3"><el-button icon="el-icon-circle-plus-outline" >新建计划</el-button></el-col>
              </el-row>
            </div>
          </div>
      </el-header>

      <el-main style=" height: 50px; overflow-y: auto;" >
       <el-row>
         <el-col>
           <el-tabs  v-model="activeName" @tab-click="handleClick">
             <el-tab-pane label="联系人信息" name="info">
               <contact-overview :form="contactData" :contactMap="contactMap"/>
             </el-tab-pane>
             <el-tab-pane label="客户详情" name="customer">
               <customer-detail :form="customerData" :contactMap="contactMap"/>
              </el-tab-pane>
             <el-tab-pane :label="businessLabel" name="business">
               <business-opportunity-info :list="businessList" :loading="businessParmas.loading"/>
               <pagination
                  v-show="businessParmas.total>0"
                  :total="businessParmas.total"
                  :page.sync="businessParmas.queryParams.pageNum"
                  :limit.sync="businessParmas.queryParams.pageSize"
                  @pagination="getBusinessList"
                />
             </el-tab-pane>
             <el-tab-pane label="计划" name="plan">计划</el-tab-pane>
           </el-tabs>
         </el-col>
       </el-row>
      </el-main>
    </el-container >
    <el-aside style="margin: 10px;width: 25%;" >待开发</el-aside>
    <!-- 联系人编辑-->
    <el-dialog :title="contactUpdateParams.title" :visible.sync="contactUpdateParams.open" width="800px"  append-to-body>
      <contact-update :form="contactData" :contactList="contactAllList" :customerList="customerList" @updateContact="updateContact" @addContact="addContact"/>
    </el-dialog>
    <!-- 商机编辑-->
    <el-dialog :title="businessUpdateParams.title" :visible.sync="businessUpdateParams.open" width="900px"  append-to-body>
      <business-update :form="businessForm"  :customerList="customerList" :productList="productList" @updateBusiness="updateBusiness" @addBusiness="addBusiness"/>
    </el-dialog>
  </el-container>
</template>

<script>
  import { listAllProduct } from "@/api/zxcrm/product"
  import { listBusinessOpportunity, getBusinessOpportunity, delBusinessOpportunity, addBusinessOpportunity, updateBusinessOpportunity } from "@/api/zxcrm/businessOpportunity"
  import { listAllContact,listContact,addContact,getContact,updateContact} from "@/api/zxcrm/contact"
  import { listAllCustomer,getCustomer,addCustomer, updateCustomer,dealCustomer } from "@/api/zxcrm/customer"
  import customerOverview from "@/views/zxcrm/components/customerOverview.vue"
  import customerDetail from "@/views/zxcrm/components/customerDetail.vue"
  import contactInfo from "@/views/zxcrm/components/contactInfo.vue"
  import businessOpportunityInfo from "@/views/zxcrm/components/businessOpportunityInfo.vue"
  import customerUpdate from "@/views/zxcrm/components/customerUpdate.vue"
  import contactUpdate from "@/views/zxcrm/components/contactUpdate.vue"
  import businessUpdate from "@/views/zxcrm/components/businessUpdate.vue"
  import contactOverview from "@/views/zxcrm/components/contactOverview.vue"
  export default {
    name:"customerInfo",
    dicts: ['zxcrm_customer_classify', 'zxcrm_customer_level', 'zxcrm_supplier_status', 'zxcrm_payment_cycle', 'zxcrm_supplier_payment_method', 'zxcrm_customer_relationship', 'zxcrm_main_sales_product', 'zxcrm_medicine_payment_method', 'zxcrm_supplier_type', 'zxcrm_customer_status', 'zxcrm_customer_type', 'zxcrm_supplier_level', 'zxcrm_customer_source', 'zxcrm_supplier_source','	zxcrm_input_method'],
    components:{
      customerOverview,
      customerDetail,
      contactInfo,
      businessOpportunityInfo,
      customerUpdate,
      contactUpdate,
      businessUpdate,
      contactOverview

    },
    data() {
      return{
        contactData:null,
        productList:[],
        activeName:'info',
        contactId:null,
        customerData:null,
        contactMap:null,
        contactList:[],
        contactAllList:[],
        height:null,
        contactLoading:false,
        customerUpdateParams:{
          title:"",
          open:false
        },
       contactForm:{},
       customerList:[],
       businessForm:{},
       businessUpdateParams:{
          title:"",
          open:false
        },
       contactUpdateParams:{
          title:"",
          open:false
        },
        contacLabel:'联系人',
        businessLabel:'商机',
        contactParmas:{
          queryParams:{
            pageNum:1,
            pageSize:10,
            customerId:null
          },
          total:0,
          loading:false
        },
        businessList:[],
        businessParmas:{
          queryParams:{
            pageNum:1,
            pageSize:10,
            contactId:null
          },
          total:0,
          loading:false
        }

      }
    },
    created() {
      // 获取路由参数
      this.getRouteParams()
    },
    methods:{
      getContact(){
        getContact(this.contactId).then(res=>{
          this.contactData = res.data
        })
      },
      handleDeal(){
        this.$modal.confirm("是否成交?").then(()=>{
          dealCustomer({id:this.customerData.id,dealStatus:'1'}).then(res=>{
            this.modal.msgSuccess("已成交")
            this.getCustomer()
          })
        })
      },
      getAllProduct(){
        listAllProduct().then(res=>{
          this.productList = res.data
        })
      },
      /** 客户列表 */
      getCustomerList(){
        listAllCustomer().then(res=>{
          this.customerList = res.data
        })
      },
      updateBusiness(e){

      },
      addBusiness(e){
        addBusinessOpportunity(e).then(res=>{
          this.$modal.msgSuccess("添加成功")
          this.getBusinessList()
          this.businessUpdateParams.open = false
        })
      },
      updateContact(e){
          updateContact(e).then(res=>{
          this.$modal.msgSuccess("修改成功")
          this.getContactAllList()
          this.getContact()
          this.contactUpdateParams.open = false
        })
      },
      addContact(e){
        addContact(e).then(res=>{
          this.$modal.msgSuccess("添加成功")
          this.getContactAllList()
          this.contactUpdateParams.open = false
        })
      },
      addCustomer(e){

      },
      updateCustomer(e){
        updateCustomer(e).then(response => {
          this.$modal.msgSuccess("修改成功")
          this.customerUpdateParams.open = false
          this.getCustomer()
        })
      },
      handleBusinessUpdate(){
        this.businessForm = {'customerId':Number(this.contactData.customerId),'productList':[],"disabled":true}
        this.getCustomerList()
        this.getAllProduct()
        this.businessUpdateParams.title = "新建商机"
        this.businessUpdateParams.open =true
      },
      handleContactUpdate(){
        this.getContactAllList()
        this.getCustomerList()
        this.contactUpdateParams.title = "编辑联系人"
        this.contactUpdateParams.open =true
      },
      handleCustomerUpdate(){
        this.getCustomer()
        this.customerUpdateParams.title = "客户信息编辑"
        this.customerUpdateParams.open =true
      },
      getBusinessList(){
        this.businessParmas.loading = true
        listBusinessOpportunity(this.businessParmas.queryParams).then(response => {
          this.businessList = response.rows
          this.businessParmas.total = response.total
           this.businessParmas.loading = false
           this.businessLabel = '商机('+this.businessList.length+')'
        })
      },
      getContactList() {
        this.contactParmas.loading = true
        listContact(this.contactParmas.queryParams).then(response => {
          this.contactList = response.rows
          this.contactParmas.total = response.total
           this.contactParmas.loading = false
           this.contacLabel = '联系人('+this.contactList.length+')'
        })
      },
      getContactAllList(){
        listAllContact().then(res=>{
          this.contactAllList = res.data
          this.contactMap = res.data.reduce((map,item)=>{
            map[item.id] = item.name
            return map
          },{})
        })
      },
      goBack(){
        this.$router.go(-1)
      },
      getRouteParams(){
         this.contactId = this.$route.query.id
         this.businessParmas.queryParams.contactId =  this.contactId
         this.getContact()
         this.getContactAllList()
      },
      getCustomer(){
        getCustomer(this.contactData.customerId).then(res=>{
          this.customerData = res.data
        })
      },
      handleClick(tab, event){
        if(tab.name == "info"){
          this.getContact()
          this.getContactAllList()
        }else if(tab.name == "business"){
          this.getBusinessList()
        }
        else if(tab.name == "customer"){
          this.getCustomer()
        }
      },
    }

  }
</script>

<style >
  .el-header {
     background-color: white;
     color: #333;
     text-align: center;
     height: 100vh;
   }
   .el-aside {
      background-color: white;
      color: #333;
      text-align: center;
      height: 100vh;
    }

    .el-main {
      background-color: white;
      color: #333;

    }
</style>
